<template>
  <view :class="[`${prefixCls}-navbar-container`]">
    <uv-navbar :fixed="navFixed" :placeholder="navPlaceholder" leftIcon="" :bgColor="BgColorVal" :imgMode="navImgMode">
      <!-- 导航栏左侧预定义 -->
      <template #left>
        <view class="navbar-slot-left" v-if="(showBack || showHome) && !isTabPage">
          <template v-if="showBack && hasHistory">
            <uv-icon name="arrow-left" :color="NavTextColor" size="20" @click="goBack"></uv-icon>
            <uv-line direction="column" :hairline="false" color="#dadbde" length="16" margin="0 8px" v-if="showBack && hasHistory && showHome"></uv-line>
          </template>
          <template v-if="showHome">
            <uv-icon name="home" size="20" :color="NavTextColor" @click="goHome"></uv-icon>
          </template>
        </view>
      </template>
      <!-- 导航栏中间预定义 -->
      <template #center>
        <view class="navbar-slot-center">
          <slot name="center">
            <text class="navbar-center-text uv-line-1" :style="{ color: NavTextColor }">{{ navTitle || pageNavTitle }}</text>
          </slot>
        </view>
      </template>
      <!-- 导航栏右侧自定义 -->
      <template #right>
        <view class="navbar-slot-right">
          <slot name="right"></slot>
        </view>
      </template>
    </uv-navbar>
  </view>
</template>

<script>
export default {
  name: 'cu-navbar',
  props: {
    navFixed: {
      // 是否
      type: Boolean,
      default: true,
    },
    navPlaceholder: {
      // 固定在顶部时，是否生成一个等高元素，以防止塌陷
      type: Boolean,
      default: false,
    },
    showBack: {
      // 是否显示返回按钮
      type: Boolean,
      default: true,
    },
    showHome: {
      // 是否显示首页按钮
      type: Boolean,
      default: true,
    },
    navTextColor: {
      // 导航栏左侧功能按钮icon && 标题颜色
      type: String,
      default: '#303133',
    },
    navTitle: {
      // 导航栏名称
      type: String,
      default: '',
    },
    navBgColor: {
      //  导航栏背景设置，支持渐变色，支持图片背景
      type: String,
      default: '#fff',
    },
    navImgMode: {
      //  navBgColor为图片时，可以通过此属性设置裁剪模式
      type: String,
      default: 'aspectFill',
    },
    scrollOpacity: {
      // page scroll 导航栏透明
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      scrollTop: 0,
      opacityVal: 0,
    }
  },
  computed: {
    hasHistory() {
      return getCurrentPages().length > 1
    },

    isTabPage() {
      return TABBAR.includes(this.$Route.path)
    },

    pageNavTitle() {
      return this.$Route?.style?.navigationBarTitleText || ''
    },

    BgColorVal() {
      let _opacity = this.opacityVal
      let _navBgColor = this.navBgColor
      let _background = ''

      if (!this.scrollOpacity) {
        _background = _navBgColor
        return _background
      }

      // rgb 或 Hex
      if (_navBgColor.indexOf('gradient') < 0 && !this.isImg) {
        _background = _opacity < 1 ? uni.$uv.colorToRgba(`${_navBgColor}`, _opacity) : _navBgColor
      } else {
        _background = _opacity < 1 ? 'transparent' : _navBgColor
      }
      return _background
    },

    NavTextColor() {
      const _placeholder = this.navPlaceholder
      const _opacity = this.opacityVal
      const _navTextColor = this.navTextColor
      let _navColor = ''
      _navColor = _opacity >= 1 ? '#303133' : _navTextColor
      return _navColor
    },

    // 判断传入的bgColor属性，是否图片路径，只要带有"/"均认为是图片形式
    isImg() {
      const isBase64 = this.navBgColor.indexOf('data:') > -1 && this.navBgColor.indexOf('base64') > -1
      return this.navBgColor.indexOf('/') !== -1 || isBase64
    },
  },

  created() {},
  mounted() {
    uni.$on('onPageScroll', (e) => {
      let top = e.scrollTop
      this.scrollTop = top
      this.opacityVal = top > this.$Platform.navbar ? 1 : top * 0.01
    })
  },
  options: {
    styleIsolation: 'shared',
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },

    goHome() {
      uni.showModal({
        title: '提示',
        content: '确定要返回首页吗？',
        success: (res) => {
          if (res.confirm) {
            this.$ROUTE.go('/pages/main/home')
          }
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('navbar-container')} {
  ::v-deep .uv-navbar--fixed {
    z-index: 980;
  }
  .navbar-slot-left {
    @include flex;
    align-items: center;
    justify-content: space-between;
    border: 0.5px solid #dadbde;
    border-radius: 100px;
    padding: 3px 7px;
    opacity: 0.8;
  }
  .navbar-slot-center {
    max-width: calc(100% - 104rpx);
    overflow: hidden;
    .navbar-center-text {
      color: $uv-main-color;
      text-align: center;
      font-size: 32rpx;
    }
  }
  .navbar-slot-right {
    max-width: 200rpx;
    overflow: hidden;
  }
}
</style>
